<template>
<div class="app-container documentation-container">
<div style="line-height: 30px">
  
<div>
    <strong><span style="font-family: 等线;font-size: 16px">我的勋章</span></strong>
</div>

<div class="imgarea">
    <div v-for="(item,index) in imglist" :key="index" class="imgdiv">
        <img :src="item.cardimg" class="imgview">
        <div>{{item.cardname}}</div>
        <div>{{timeformate(item.starttime)}}</div>
    </div>
</div>


<div>
    <strong><span style="font-family: 等线;font-size: 16px">我的荣誉记录</span></strong>
</div>


    <div v-for="(item,index) in medalist" :key="index" class="medaldiv">
       <div class="medaltime">{{timeformate(item.dt)}}</div>
       <div class="medaltext">{{item.title}}</div>
    </div>

</div>
</div>
 </template>
<script>
import { getcards } from '@/api/user'



export default {

  data() {
    return {
        imglist:[
          
        ],
        medalist:[
         
        ],



    }
  },
  components:{


  },
  mounted(){
 this.getcards();

  },
  methods:{
            timeformate(value) {
       var data = new Date(value );
      var year = data.getFullYear();
      var mouth =
        data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
      var day = data.getDate() < 9 ? "0" + data.getDate() : data.getDate();
      var hour=data.getHours();
      var minute=data.getMinutes();
      var sec=data.getSeconds();
      if(minute<10)
      minute="0"+minute;
      if(hour<10)
      hour="0"+hour;
      if(sec<10)
      sec="0"+sec;
      return year + "-" + mouth + "-" + day;
    },
      getcards(){
          this.$loadingshow();
  getcards({}).then(res => {
      this.$loadingclose();
              if(res.code==200)
              {
              this.medalist=res.result.successlog;
              this.imglist=res.result.cards;

              }
              else
              {


              }
             
          },
          err=>{
              this.$loadingclose(); 
          }
          
          
          
          );

      }
  }
}
</script>

<style lang="scss" scoped>
.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 45%;
    }
    .imgarea{
        width: 90%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
            min-height: 200px;
    }
    .medaldiv{
        display: flex;
        justify-content: flex-start;
        // height: 50px;
        line-height: 25px;
        margin-left:20px;
    }
    .imgdiv{
        margin-right: 40px;
        margin-bottom: 40px;
        font-size: 14px;
        text-align: center;
    }
    .imgview{
        width: 200px;
        height: 200px;

    }
    .medaltime{
        // width: 20%;
            width: 120px;
    }
        .medaltext{
        width: 80%;
    }
</style>
